<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <title>测试</title>
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current" style="background: #fff;">
        
        <div class="content question-check-layout">
          <form action="${ctx.host}/questionnaires/check" method="POST" style="position: relative; height: 100%;">
            
            <div class="swiper-container questionnaire-check" data-space-between='10'>
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您的性别</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "1" data-grades = "2"><span>A</span><div>男</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "1" data-grades = "1"><span>B</span><div>女</div></a>
                    <input type="hidden" name="firstQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您的年龄</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "2" data-grades = "3"><span>A</span><div>18-25</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "2" data-grades = "3"><span>B</span><div>26-35</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "2" data-grades = "2"><span>C</span><div>36-45</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="D" data-question = "2" data-grades = "1"><span>D</span><div>45以上</div></a>
                    <input type="hidden" name="secondQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>BMI数值<br/><small style="font-size: .65rem; font-weight: 400;">计算方法=体重(千克)/身高(米)<sup>2</sup></small></p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "3" data-grades = "2"><span>A</span><div>小于 18.5</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "3" data-grades = "3"><span>B</span><div>18.5-23.9</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "3" data-grades = "2"><span>C</span><div>24-27</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="D" data-question = "3" data-grades = "1"><span>D</span><div>28-32</div></a>
                    <input type="hidden" name="thirdQuestion">
                  </div>
                </div>
                 <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>你知道减脂和减重的区别吗？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "4" data-grades = "4"><span>A</span><div>非常清楚</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "4" data-grades = "3"><span>B</span><div>知道</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "4" data-grades = "2"><span>C</span><div>好像知道</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="D" data-question = "4" data-grades = "1"><span>D</span><div>不知道</div></a>
                    <input type="hidden" name="fourthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您知道减脂心率范围是多少吗</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "5" data-grades = "1"><span>A</span><div>100-120</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "5" data-grades = "1"><span>B</span><div>120-140</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "5" data-grades = "3"><span>C</span><div>130-150</div></a>
                    <input type="hidden" name="fifthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您知道62公斤的学员，每日饮水量？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "6" data-grades = "2"><span>A</span><div>3000ml</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "6" data-grades = "4"><span>B</span><div>3100ml</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "6" data-grades = "3"><span>C</span><div>3200ml</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="D" data-question = "6" data-grades = "1"><span>D</span><div>6100ml</div></a>
                    <input type="hidden" name="sixthQuestion">
                  </div>
                </div>
                 <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您喜欢的运动类型？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "7" data-grades = "1"><span>A</span><div>有氧</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "7" data-grades = "3"><span>B</span><div>无氧</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "7" data-grades = "2"><span>C</span><div>有氧无氧结合</div></a>
                    <input type="hidden" name="seventhQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>如果您开始运动，觉得可以坚持运动的频次？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "8" data-grades = "1"><span>A</span><div>一周1-2次</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "8" data-grades = "3"><span>B</span><div>一周3-4次</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "8" data-grades = "4"><span>C</span><div>一周5-7次</div></a>
                    <input type="hidden" name="eighthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>如果让您每天运动，您觉得最多会花多长时间？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "9" data-grades = "1"><span>A</span><div>10-20分钟</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "9" data-grades = "2"><span>B</span><div>20-30分钟</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "9" data-grades = "3"><span>C</span><div>30-60分钟</div></a>
                    <input type="hidden" name="ninthQuestion">
                  </div>
                </div>
                 <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>目前不能定期健身运动的最主要原因是？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "10" data-grades = "2"><span>A</span><div>太忙，太懒，没时间</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "10" data-grades = "1"><span>B</span><div>没有计划，没有伙伴</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "10" data-grades = "3"><span>C</span><div>对运动不感兴趣但是想减肥</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="D" data-question = "10" data-grades = "4"><span>D</span><div>一直在坚持</div></a>
                    <input type="hidden" name="tenthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>当您运动完，肌肉舒爽的酸胀感，您会上瘾吗？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "11" data-grades = "3"><span>A</span><div>会，还想再被虐</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "11" data-grades = "2"><span>B</span><div>一般般</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "11" data-grades = "1"><span>C</span><div>不会，感觉狗带了</div></a>
                    <input type="hidden" name="eleventhQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>跑步时候，<br/>您觉得自己快乐吗？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "12" data-grades = "3"><span>A</span><div>快乐的</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "12" data-grades = "2"><span>B</span><div>一般</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "12" data-grades = "1"><span>C</span><div>不快乐</div></a>
                    <input type="hidden" name="twelfthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您喜欢一个人运动，<br/>还是结伴团练？</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "13" data-grades = "1"><span>A</span><div>一个人</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "13" data-grades = "1"><span>B</span><div>和熟人一起</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "13" data-grades = "2"><span>C</span><div>不介意和陌生人一起</div></a>
                    <input type="hidden" name="thirteenthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>对自身身材做个评价</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "14" data-grades = "1"><span>A</span><div>偏胖，想局部减肥</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "14" data-grades = "2"><span>B</span><div>正常，但希望变得更完美</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "14" data-grades = "2"><span>C</span><div>偏瘦，希望能够增肌变得更健康</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="D" data-question = "14" data-grades = "4"><span>D</span><div>已经是最完美的状态</div></a>
                    <input type="hidden" name="fourteenthQuestion">
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="question-title"><img src="${ctx.resource}/image/questionnaire/question-icon.png"><p>您认为您是术语下面哪一类人</p></div>
                  <div class="answer-layout">
                    <a href="javascript:void(0);" class="answer-item" data-selector="A" data-question = "15" data-grades = "1"><span>A</span><div>健身新秀</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="B" data-question = "15" data-grades = "2"><span>B</span><div>健身小咖</div></a>
                    <a href="javascript:void(0);" class="answer-item" data-selector="C" data-question = "15" data-grades = "3"><span>B</span><div>健身大咖</div></a>
                    <input type="hidden" name="fifteenthQuestion">
                  </div>
                </div>
              </div>
            </div>
            <a type="submit" class="button button-fill ft-button-yellow questionnaire-submit hide">提交</a>
          </form>
          
          <div class="progress-layout">
            <span class="prev"></span>
            <div class="progress-box">
              <div class="progress-bar"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
              <div class="progress-item"></div>
            </div>
            <span class="next"></span>
          </div>
        </div>
        
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/questionnaire/questionnaire-check.js" />
    <script type="text/javascript">
      require(['page/questionnaire/questionnaire-check'], function(page) {
        page.init()
      })
    </script>
  </body>
</html>